<template>
  <div>
    这边来做一个逐步打字的页面
    <div>{{ outText }}</div>
    <div id="map" style="height: 500px; width: 500px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import geoJson from "../../assets/data/map.json";
export default {
  data() {
    return {
      chartData: [
        { name: "北京", value: 8888 },
        { name: "上海", value: 10000 },
        { name: "天津", value: 7777 },
        { name: "重庆", value: 10001 },
        { name: "黑龙江", value: 8989 },
        { name: "辽宁", value: 6666 },
        { name: "吉林", value: 5555 },
        { name: "河北", value: 4656 },
        { name: "河南", value: 888 },
        { name: "湖北", value: 9999 },
        { name: "湖南", value: 9000 },
        { name: "山东", value: 3500 },
        { name: "山西", value: 1888 },
        { name: "陕西", value: 1600 },
        { name: "安徽", value: 9000 },
        { name: "浙江", value: 3840 },
        { name: "江苏", value: 7000 },
        { name: "福建", value: 1000 },
        { name: "广东", value: 2000 },
        { name: "海南", value: 3000 },
        { name: "四川", value: 1600 },
        { name: "云南", value: 800 },
        { name: "贵州", value: 400 },
        { name: "青海", value: 6669 },
        { name: "甘肃", value: 5555 },
        { name: "江西", value: 666 },
        { name: "台湾", value: 6666 },
        { name: "内蒙古", value: 6000 },
        { name: "宁夏", value: 4900 },
        { name: "新疆", value: 500 },
        { name: "西藏", value: 8600 },
        { name: "广西", value: 5000 },
        { name: "香港", value: 1000 },
        { name: "澳门", value: 600 },
      ],
      geoCoordMap: {
        //定义自定义图标放置的位置
        新疆: [86.61, 40.79],
        西藏: [89.13, 30.66],
        黑龙江: [128.34, 47.05],
        吉林: [126.32, 43.38],
        辽宁: [123.42, 41.29],
        内蒙古: [112.17, 42.81],
        北京: [116.6, 40.4],
        宁夏: [106.27, 36.76],
        山西: [111.95, 37.65],
        河北: [115.21, 38.44],
        天津: [117.64, 39.52],
        青海: [97.07, 35.62],
        甘肃: [103.82, 36.05],
        山东: [118.01, 36.37],
        陕西: [108.94, 34.46],
        河南: [113.46, 34.25],
        安徽: [117.28, 31.86],
        江苏: [120.26, 32.54],
        上海: [121.46, 31.28],
        四川: [103.36, 30.65],
        湖北: [112.29, 30.98],
        浙江: [120.15, 29.28],
        重庆: [107.51, 29.63],
        湖南: [112.08, 27.79],
        江西: [115.89, 27.97],
        贵州: [106.91, 26.67],
        福建: [118.31, 26.07],
        云南: [101.71, 24.84],
        // 台湾: [121.01, 23.54],
        广西: [108.67, 23.68],
        广东: [113.98, 22.82],
        海南: [110.03, 19.33],
        // 澳门: [113.54, 22.19],
        // 香港: [114.17, 22.32],
      },
      newgeoCoordMap: [],
      contentText: "这边是我测试的数据,这段数据将会按照需求一个个的输出!",
      outText: "",
      index: 0,
      typingSpeed: 200, // 打字速度
      typing: false, // 控制打字状态
    };
  },
  mounted() {
    this.newgeoCoordMap = [];
    for (const key in this.geoCoordMap) {
      let arr = { name: key, value: this.geoCoordMap[key] };
      this.newgeoCoordMap.push(arr);
    }
    console.log(this.newgeoCoordMap);
    this.myChart = echarts.init(document.getElementById("map"));
    // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
    // 地图：世界地图，中国地图，省份地图，市区地图
    echarts.registerMap("china", geoJson);
    this.myChart.setOption({
      // 背景色
      backgroundColor: "rgb(0, 0, 0)",
      // 配置项(组件)
      grid: {
        top: "0",
        bottom: "0",
        right: "0",
        left: "0",
      },
      geo: {
        map: "china",
        // 地图的长宽比例
        aspectScale: 0.68,
        // 图层
        zoom: 1.35,
        // zlevel: 2,
        // roam: "scale", //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        top: "22%",
        // 样式
        itemStyle: {
          // 标准
          normal: {
            // 地图区域的颜色
            areaColor:
              // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
              {
                type: "radial", //圆
                x: 0.5,
                y: 0.5,
                r: 0.8,
                // 颜色的步骤
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(50, 192, 233, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(50, 192, 233, 1)", // 100% 处的颜色
                  },
                ],
                // 延长作用域
                globalCoord: true,
              },
            // 盒子的阴影
            shadowColor: "#00ACF9",
            // 偏移
            shadowOffsetX: 5,
            shadowOffsetY: 3,
          },
        },
        region: [
          // {
          //   name: "南海诸岛",
          //   itemStyle: {
          //     opacity: 0,
          //   },
          // },
          {
            name: "内蒙古",
            selected: true,
            itemStyle: {
              areaColor: "red",
              color: "red",
            },
          },
        ],
      },
      series: [
        // 配置地图相关的数据参数
        {
          type: "map",
          data: this.chartData,
          aspectScale: 0.68,
          label: {
            normal: {
              // 显示文字
              show: true,
              offset: [10, -20],
              formatter: function (params) {
                if (params.name) {
                  return (
                    "{a|" +
                    params.name +
                    "}" +
                    "{b|" +
                    (params.value ? params.value : "") +
                    "}" +
                    "{titleBg|}"
                  );
                }
              },
              padding: [5, 10, 0, 10],
              rich: {
                titleBg: {
                  color: "white",
                  fontSize: 10,
                  padding: 4,
                  width: "100%",
                  align: "right",
                  // margin: [0, 0, 80, 0],
                  backgroundColor: {
                    image:
                      "",
                  },
                },
                b: {
                  color: "#00FCFF",
                  fontSize: 10,
                },
              },
              areaColor: "rgba(128, 128, 128)",
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              textStyle: {
                color: "white", //鼠标滑过字体颜色
              },
            },
          },
          // 图层
          zoom: 1.35,

          top: "22%",
          map: "china",
          itemStyle: {
            normal: {
              // 背景色
              backgroundColor: "rgb(147,235,248,0.4)",
              // 边框
              borderWidth: 1,
              // 区域颜色
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                // 文档
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "#2D6DB1" },
                  { offset: 1, color: "#3170AE" }, //每个省的地图背景色
                ],
                // 全局生效
                globalCoord: true,
              },
            },
            // 高亮效果
            emphasis: {
              areaColor: "#12254C", //鼠标滑过背景颜色
              borderWidth: 0.1,
            },
          },
        },
        {
          type: "scatter",
          roam: "scale",
          // symbol: "image://" + require("@/assets/images/largeScreen/load.png"),
          symbolSize: 22,
          coordinateSystem: "geo",
          data: this.newgeoCoordMap,
          label: {
            /*  normal: {
                       formatter: '{b}',
                       position: 'right',
                       show: false
                   }, */
            emphasis: {
              show: false,
            },
          },
        },
      ],
      // 连续型数据自定义分段。
      visualMap: {
        type: "piecewise", // 分段型
        // 连续型数据自定义分段
        // 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界
        pieces: [
          {
            gt: 10000,
            label: " 100001",
            color: "rgba(233, 185, 213, 0.8)",
          },
          {
            gte: 5000,
            lte: 10000,
            label: "10000",
            color: "rgba(200, 199, 229, 0.8)",
          },
          {
            gte: 500,
            lte: 5000,
            label: "501 - 5000",
            color: "rgba(176, 177, 234, 0.8)",
          },
          {
            gte: 400,
            lte: 500,
            label: "500",
            color: "rgba(126, 149, 226, 0.8)",
          },
          {
            gte: 300,
            lte: 400,
            label: " 400",
            color: "rgba(74, 165, 237, 0.8)",
          },
          {
            gte: 200,
            lte: 300,
            label: "300",
            color: "rgba(43, 190, 221, 0.8)",
          },
          {
            gte: 0,
            lte: 200,
            label: "200",
            color: "rgba(164, 232, 232, 0.8)",
          },
        ],

        // 连续型数据分段设置
        // 以下部分自定义设置 与 连续型数据自动平均分段 一样
        selectedMode: "multiple", // 选择模式，可以是：'multiple'（多选）。'single'（单选）。true（单选）从5.3.3版本支持。false（禁止选择）从5.3.3版本支持。四种取值效果都不一样。
        inverse: false, // 是否反转。
        precision: 0, // 数据展示的小数精度。

        align: "auto", // 指定组件中图形（比如小方块）和文字的摆放关系，可选值为：'auto' 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。

        showLabel: true, // 是否显示每项选块的文本标签。默认情况是，如果 visualMap-piecewise.text 被使用则不显示文本标签，否则显示。

        itemSymbol: "rect", // 默认的图形。可选值为：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
        show: true, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在，即地图各块会渲染颜色。
        // left、top、right、bottom 设置组件在容器中的位置
        bottom: "25",
        orient: "vertical", // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。

        itemGap: 0,
        padding: 20,
        text: ["%", "负荷率"],
        show: true,
        borderWidth: 0,

        textGap: 3,
        // 文字样式设置
        textStyle: {
          color: "#FFFFFF",
          fontSize: 8,
        },
      },
    });
  },
  methods: {
    startTyping() {
      this.typing = true;
      this.typeText();
    },
    stopTyping() {
      this.typing = false;
    },
    typeText() {
      if (this.typing && this.index < this.contentText.length) {
        this.outText += this.contentText[this.index];
        this.index++;
        setTimeout(() => this.typeText(), this.typingSpeed);
      }
    },
    resetTyping() {
      this.index = 0;
      this.outText = "";
      this.startTyping();
    },
  },
};
</script>

<style scoped></style>
